
<template>
  <div class="ky-scoll" >
      <div class="ky-s-title">
        <div class="title">{{title||'论文'}}</div>
        <div class="more ky-gopage" @click="clickClassText()"
             v-if="config && config.data && config.data.length>0"
        >更多
          <Icon type="ios-arrow-forward" :size="14" style="margin-top: -2px;"/>
        </div>
      </div>
    
      <dv-scroll-board :config="config" class="dv-border-pannel" v-if="config && config.data && config.data.length>0"/>

      <NoData v-else text="暂无数据"></NoData>
    
  </div>
</template>
 
<script>
import NoData from '@/components/common/noDataPage.vue'


export default {
  props:['list','title','column','head','query'],
  components:{NoData},
  data() {
    let rownum = ((window.innerHeight -360)/120).toFixed(0)

    rownum = rownum>8?8:rownum
    rownum = rownum<5?5:rownum
    return {
     
      top1:require('../icon-top1.svg'),
      top2:require('../icon-top2.svg'),
      top3:require('../icon-top3.svg'),
      lists:this.list,
      config: {
        headerHeight: 48,
        header: ['&nbsp;&nbsp;&nbsp;&nbsp;#','名称', '作者', '期刊','发表时间'],
        data: [
          ['1','网络安全xxs攻击', '李玫瑾', '知网','2020-09-09'],
          ['2','网络安全xxs攻击', '李玫瑾', '知网','2020-09-09'],
          ['3','网络安全xxs攻击', '李玫瑾', '知网','2020-09-09'],
          ['4','网络安全xxs攻击', '李玫瑾', '知网','2020-09-09'],
          ['5','网络安全xxs攻击', '李玫瑾', '知网','2020-09-09'],
          ['6','网络安全xxs攻击', '李玫瑾', '知网','2020-09-09'],
          ['7','网络安全xxs攻击', '李玫瑾', '知网','2020-09-09'],
          ['8','网络安全xxs攻击', '李玫瑾', '知网','2020-09-09'],
          ['9','网络安全xxs攻击', '李玫瑾', '知网','2020-09-09'],
          ['10','网络安全xxs攻击', '李玫瑾', '知网','2020-09-09'],
          ['11','网络安全xxs攻击', '李玫瑾', '知网','2020-09-09']
        ],
        rowNum:rownum,
        columnWidth: [68, 220, 100, 100, 150],
        align: ['left'],
        is_show: false,
        headerBGC: 'var(--table-th-bgcolor)',
        oddRowBGC: 'var(--card-body-bgcolor)',
        evenRowBGC: 'var(--home-task-bgcolor)',
        waitTime: 2500
      },
      active:this.$route.query.page===undefined?99:Number(this.$route.query.page),

    }

    
    
    
  },
  watch: {
    $route: { //路由修改后init 页面
      handler: function(route) {
        
      },
      deep: true
    },
    list: { //路由修改后init 页面
      handler: function(newv,oldv) {
        this.lists = newv
        this.init()

      },
      deep: true
    }
  },
  

  mounted() {
    this.init();
    
  },

  methods: {
    init() {
      // 1. 获取当前的page 配置
      this.active = this.$route.query.page===undefined?99:Number(this.$route.query.page)
      this.initData()
    },
    initData(){
      let config = JSON.parse(JSON.stringify(this.config))

      let rownum = ((window.innerHeight -360)/120).toFixed(0)
      rownum = rownum>8?8:rownum
      rownum = rownum<5?5:rownum
      config.rownum = rownum
      
      config.header = this.head
      
      
      let c = this.column || ['index','name','author','coontentCompany','time']
      
      
   
      let data = []
      let list = this.lists
      list.forEach((item,index)=>{
        let idx = `<span class="d-index d-index${index}">${index+1}</span>`
        if(index<3){
          let key = 'top'+(index+1)
          let img = this[key]
          idx =`<span class="d-index d-index${index}"><img src="${img}"/></span>`
        }
        // let c1 = `<span title="${item[c[1]]}">${item[c[1]]}</span>`
        // let c2 = `<span title="${item[c[2]]}">${item[c[2]]}</span>`
        // let c3 = `<span title="${item[c[3]]}">${item[c[3]]}</span>`
        // let c4 = `<span title="${item[c[4]]}">${item[c[4]]}</span>`
        
        let d = [idx]
        for(let i=1;i<c.length;i++){
          let key = c[i]
          let val = item[key]
          d.push(`<span title="${val}">${val}</span>`)
        }

        data.push(d)
     
      })
      config.data = data
      
      
      
      
      
      
      
      this.config = config
    },
    clickClassText(){
      let name = this.$route.name

      // {type:1,level:'会议论文'},
      let query = this.query || {}
      let idx = query.type
      let params = {
        ...query,
        type:''
      }
      
      this.$router.push({name:name,query:{page:idx},params:params})
    },
  }
}
</script>
<style scoped>
.ky-s-title{
  display: flex;
  justify-content: space-between;
}
.ky-s-title .title{
  color: var(--default-color);
  font-size: 13px;
  margin-bottom: 16px;
}
.ky-scoll{
  height: 100%;
}
.ky-gopage{
  color: #468dff;
  cursor: pointer;
}


.dv-scroll-board{
  width:100%;
  height:calc(100% - 40px);
  color: var(--default-color);
}
/deep/ .header-item{
  color: var(--table-th-color);
  font-weight: 600;
}
.ky-scoll .d-index0{
  
}

.ky-scoll /deep/ .d-index {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.d-index img{
  height: 22px;
}

</style>